<template>
    <div class="clearfix fb-control"
         v-if="unit.visible">
        <label class="col-sm-2 control-label">{{ unit.label }}</label>
        <div class="col-sm-10">
            {{ unit.padLeft }}
            <input :id="unit.unitGid"/>
            {{ unit.padRight }}
            <span class="help-block" v-if="unit.helpText">{{ unit.helpText }}</span>
        </div>
    </div>
</template>
<script>
    import {mapGetters} from 'vuex'
    import _ from 'lodash'
    import moment from 'moment'
    export default {
        name: 'DatePickerUnit',
        props: ['unit'],
        data () {
            return {}
        },
        computed: {
            ...mapGetters({
                locale: 'locale'
            })
        },
        mounted () {
            this.destroyUnit().then(() => {
                this.initUnit()
            })
        },
        beforeDestroy () {
            this.destroyUnit()
        },
        methods: {
            initUnit () {
                const kendoDatePicker = $('#' + this.unit.unitGid).kendoDatePicker({
                    culture: _.isNil(this.unit.culture) ? this.locale : this.unit.culture,
                    dateInput: _.isNil(this.unit.dateInput) ? false : this.unit.dateInput,
                    depth: _.isNil(this.unit.depth) ? 'month' : this.parseOptions('depth', this.unit.depth),
                    start: _.isNil(this.unit.start) ? 'month' : this.parseOptions('start', this.unit.start),
                    disableDates: _.isNil(this.unit.disableDates) ? null : this.parseOptions('disableDates', this.unit.disableDates),
                    format: _.isNil(this.unit.format) ? 'yyyy/MM/dd' : this.unit.format,
                    min: _.isNil(this.unit.min) ? new Date(1900, 0, 1) : this.parseOptions('min', this.unit.min),
                    max: _.isNil(this.unit.min) ? new Date(2099, 11, 31) : this.parseOptions('max', this.unit.max),
                    value: _.isNil(this.unit.defaultValue) ? null : this.parseOptions('defaultValue', this.unit.defaultValue)
                }).data('kendoDatePicker')

                if (!_.isNil(this.unit.width)) {
                    const reg = /(\d+)(px|%|em|in|pt)$/gi
                    if (reg.test(this.unit.width)) {
                        kendoDatePicker.wrapper.css('width', this.unit.width)
                    }
                }

                if (this.unit.readonly === true) {
                    kendoDatePicker.readonly()
                }

                if (this.unit.disabled === true) {
                    kendoDatePicker.enable(false)
                }
            },
            /**
             * 销毁控件实例
             */
            destroyUnit () {
                let unit
                if (!_.isEmpty(this.unit)) {
                    unit = $('#' + this.unit.unitGid).data('kendoDatePicker')
                }

                return new Promise((resolve) => {
                    if (!_.isEmpty(unit)) {
                        unit.destroy()
                    }
                    resolve()
                })
            },
            /**
             * 转日期格式
             */
            parseDate (value) {
                const formats = ['YYYY/MM/DD', 'YYYY/M/D', 'YYYY-MM-DD', 'YYYY-M-D', 'YYYYMMDD', 'YYYYMD']

                return _.isDate(value) ? value : _.isString(value) && moment(value, formats).isValid() ? moment(value, formats).toDate() : null
            },

            parseOptions (option, value) {
                let result = null
                switch (option) {
                    case 'depth':
                    case 'start':
                        // 如果输入值不在以下范围, 则默认为 month
                        if (!_.includes(['month', 'year', 'decade', 'century'], value)) {
                            result = 'month'
                        }
                        break
                    case 'disableDates':
                        // 输入值先去除多余空格再根据 [,] 分组
                        let arr = _.chain(value)
                            .trim()
                            .split(',')
                            .uniq()
                            // 对一般日期格式进行转换
                            .map(val => _.isDate(this.parseDate(val)) ? this.parseDate(val) : val)
                            // 过滤掉非日期格式或不合法字符串的值
                            .filter(val => _.isDate(val) || _.includes(['mo', 'tu', 'we', 'th', 'fr'], val))

                        // 以下代码为控件限制, 控件支持全部是 date 类型或者全部是 string 类型的传参
                        // 如果数组中第一项的值是 date 类型, 则只过滤出日期
                        // 如果数组中第一项的值是 string 类型, 则只过滤出字符串
                        if (arr.head().isDate()) {
                            arr.filter(val => _.isDate(val))
                        } else if (_.includes(['mo', 'tu', 'we', 'th', 'fr'], arr.head())) {
                            arr.filter(val => _.includes(['mo', 'tu', 'we', 'th', 'fr'], val))
                        }

                        result = arr.value()
                        break
                    case 'min':
                        result = _.isNil(this.parseDate(value)) ? new Date(1900, 0, 1) : this.parseDate(value)
                        break
                    case 'max':
                        result = _.isNil(this.parseDate(value)) ? new Date(2099, 11, 31) : this.parseDate(value)
                        break
                    case 'defaultValue':
                        result = this.parseDate(value)
                        break
                }

                return result
            }
        }
    }
</script>